<template>
	<view class="">
		<view class="item-catyes">
			<van-icon name="shop-o" />&nbsp;
			<text class="time">营昕居</text>
			<text class="caty-tistus">{{formatEmployment(listinfo.status)}}</text>
		</view>  
		<view class="order-item">
			<view
				class="goods-box-single" 
			>
				<image class="goods-img" :src="listinfo.mainImage" mode="aspectFill"></image>
				<view class="right">
					      <text class="title clamp" v-if="id == 1">{{listinfo.userNick}}</text>
					      <text class="title clamp" v-else>{{listinfo.provideServiceUserNick}}</text>
					      <text class="attr-box">{{listinfo.title}}</text>
						  <text class="price">{{listinfo.price}}</text>
						  <text class="num">x{{listinfo.number}}</text>
				</view>
				
			</view>
			<view class="price-box">
				<text class="price">￥{{listinfo.totalPrice}}</text>
			</view>
		</view>
		 
		<view v-if="id == 1">
		<view class="caty-order">
			<text>订单编号</text>
			<text class="caty-test" style="color: #818080; font-size: 28rpx;">{{listinfo.serviceOrderId}}</text>
		</view>
		<view class="caty-order">
			<text>创建时间</text>
			<text class="caty-test" style="color: #818080; font-size: 28rpx;">{{listinfo.createTime}}</text>
		</view>
		<view class="caty-order">
			<text>完成时间</text>
			<text class="caty-test" style="color: #818080; font-size: 28rpx;">{{listinfo.finishTime}}</text>
		</view>
			</view>
			
			<view v-else>
				<view class="caty-order">
					<text>服务地址</text>
					<text class="caty-test" style="color: #818080; font-size: 28rpx;">
					{{listinfo.serviceAddress.province}} {{listinfo.serviceAddress.city}} {{listinfo.serviceAddress.county}} {{listinfo.serviceAddress.detail}}
					</text>
				</view>
				<view class="caty-order">
					<text>订单编号</text>
					<text class="caty-test" style="color: #818080; font-size: 28rpx;">{{listinfo.serviceOrderId}}</text>
				</view>
				<view class="caty-order">
					<text>付款方式</text>
					<text class="caty-test" style="color: #818080; font-size: 28rpx;">{{formtender(listinfo.payChannel)}}</text>
				</view>
				<view class="caty-order">
					<text>创建时间</text>
					<text class="caty-test" style="color: #818080; font-size: 28rpx;">{{listinfo.createTime}}</text>
				</view>
				<view class="caty-order">
					<text>付款时间</text>
					<text class="caty-test" style="color: #818080; font-size: 28rpx;">{{listinfo.payTime}}</text>
				</view>
			</view>
	</view>
</template>

<script>
	import employeesConst from '@/employees/employees.js'
	const hireTypet = {}
	 employeesConst.histoertype.forEach((item)=>{
		 hireTypet[item.status] = item.value
	 })
	 const hirepet = {}
	 employeesConst.hisertype.forEach((item)=>{
	 		 hirepet[item.payChannels] = item.value
	 })
	export default{
		data(){
			return{
				listinfo:{},
				id:''
			}
		},
		onLoad(option) {
			this.listinfo = JSON.parse(option.data)
			this.id = option.id
			console.log(this.listinfo)
			this.loachexp()
		},
		methods:{
			loachexp(){
				
			},
			// 状态转换
			formatEmployment(code){
				return hireTypet[code];
			},
			// 付款方式转换
			formtender(code){
				return hirepet[code]
			}
		}
	}
</script>

<style lang="scss">
	.item-catyes{
		display: flex;
		 margin-top: 30rpx;
		 margin-left: 20rpx;
	}
	.time{ 
		display: inline-block;
		font-size: 30rpx;
		margin-left: 10rpx;
	}
	.caty-tistus{
		display: inline-block;
		position: absolute;
		right: 20rpx;
		margin-right: 30rpx;
		font-size: 28rpx;
	}
	.order-item{
			display: flex;
			flex-direction: column;
			padding-left: 30upx;
			background: #fff;
			margin-top: 16upx;
			}
	/* 单条商品 */
	.goods-box-single{
		display: flex;
		padding: 20upx 0;
		.goods-img{
			display: block;
			width: 120upx;  
			height: 120upx;
			border-radius: 10px;
		}
		.right{
			flex: 1;
			flex-direction: column;
			padding: 0 30upx 0 24upx;
			overflow: hidden;
			.title{
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				line-height: 1;
				margin-bottom: 20rpx;
			}
			.attr-box{
				font-size: $font-sm + 2upx;
				color: $font-color-light;
		
			}
			.price{
				transform: translateY(-120%);
				float: right;
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				&:before{
					content: '￥'; 
					font-size: $font-sm;   
					margin: 0 2upx 0 8upx;
				}
			}
			.num{
				position: absolute;
				right: 35rpx;
				font-size:24rpx !important;
				margin: 0 8upx !important;
				color:#A4A4A4 !important;
			}
		}
	}
	.price-box{
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
		padding: 20upx 30upx;
		font-size: $font-sm + 2upx;
		color: $font-color-light;
	
		.price{
			font-size: $font-lg;
			color:$uni-color-primary;
			font-size: 40rpx;
			font-weight: bold;
			&:before{
				font-size: $font-sm;
				margin: 0 2upx 0 8upx;
			}
		}
	}
	.caty-order{
		margin-top: 30rpx;
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #1d1d1d;
		.caty-test{
			float: right;
			margin-right: 20rpx;
		}
	}
</style>